<div class="container-xl" style="min-height: 335px" [ngClass]="{'widget': widget, 'full-height': !widget}">
  <div *ngIf="!widget" class="float-left" style="display: flex; width: 100%; align-items: center;">
    <h1>
      <img src="/resources/cubo.svg" style="width: 1.1em; height: 1.1em; margin-right: 0.1em; transform: translateY(-0.1em);">
      {{ label }}
    </h1>
    <div *ngIf="!widget && isLoading" class="spinner-border" role="status"></div>
  </div>

  <div class="clearfix"></div>

  @if (isLoading) {
    loading!
    <div class="spinner-wrapper">
      <div class="ml-2 spinner-border text-light" style="width: 25px; height: 25px"></div>
    </div>
  } @else if (error || !verified.length) {
    <div class="error-wrapper">
      <span>temporarily unavailable</span>
    </div>
  } @else {
    <div style="min-height: 295px">
      <div *ngIf="!widget" class="search-container mb-3">
        <input
          type="text"
          class="form-control"
          (input)="applyFilter($event)"
          placeholder="Search by student name or ID..."
          i18n-placeholder="simpleproof.search_placeholder"
        >
      </div>
      <table class="table table-borderless table-fixed">
        <thead>
          <th class="student text-left sortable" [ngClass]="{'widget': widget}" (click)="$event.stopPropagation(); sortBy('student_name')" style="cursor: pointer;">
            <span i18n="simpleproof.student_name">Student Name</span>
            <div class="sort-icons ml-1">
              <fa-icon [icon]="['fas', 'caret-up']" [fixedWidth]="true" [class.active]="sortField === 'student_name' && sortDirection === 'asc'" (click)="$event.stopPropagation(); sortBy('student_name', 'asc')"></fa-icon>
              <fa-icon [icon]="['fas', 'caret-down']" [fixedWidth]="true" [class.active]="sortField === 'student_name' && sortDirection === 'desc'" (click)="$event.stopPropagation(); sortBy('student_name', 'desc')"></fa-icon>
            </div>
          </th>
          <th class="id text-left sortable" [ngClass]="{'widget': widget}" (click)="$event.stopPropagation(); sortBy('id_code')" style="cursor: pointer;">
            <span i18n="simpleproof.id_code">ID</span>
            <div class="sort-icons ml-1">
              <fa-icon [icon]="['fas', 'caret-up']" [fixedWidth]="true" [class.active]="sortField === 'id_code' && sortDirection === 'asc'" (click)="$event.stopPropagation(); sortBy('id_code', 'asc')"></fa-icon>
              <fa-icon [icon]="['fas', 'caret-down']" [fixedWidth]="true" [class.active]="sortField === 'id_code' && sortDirection === 'desc'" (click)="$event.stopPropagation(); sortBy('id_code', 'desc')"></fa-icon>
            </div>
          </th>
          <th class="proof text-right" [ngClass]="{'widget': widget}" i18n="simpleproof.proof">Proof</th>
        </thead>
        <tbody *ngIf="verifiedPage; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
          <tr *ngIf="widget" class="search-row">
            <td colspan="3" class="p-0" style="padding: 0 0 6px !important;">
              <div class="search-container">
                <input
                  type="text"
                  class="form-control"
                  (input)="applyFilter($event)"
                  placeholder="Search by student name or ID..."
                  i18n-placeholder="simpleproof.search_placeholder"
                >
              </div>
            </td>
          </tr>
          <tr *ngFor="let item of verifiedPage">
            @if (widget) {
              <td class="student text-left" [class]="widget ? 'widget' : ''">
                @if (item.sanitized_download_url) {
                  <a [href]="item.sanitized_download_url" target="_blank">
                    <span>{{ item.student_name }}</span>
                    <span class="icon ml-2">
                      <fa-icon [icon]="['fas', 'file-pdf']" [fixedWidth]="true"></fa-icon>
                    </span>
                  </a>
                } @else {
                  {{ item.student_name }}
                }
              </td>
            } @else {
              <td class="student text-left" [class]="widget ? 'widget' : ''">{{ item.student_name }}</td>
              <td class="id text-left" [class]="widget ? 'widget' : ''">
                @if (item.sanitized_download_url) {
                  <a [href]="item.sanitized_download_url" target="_blank">
                    <span>{{ item.id_code }}</span>
                    <span class="icon ml-2">
                      <fa-icon [icon]="['fas', 'file-pdf']" [fixedWidth]="true"></fa-icon>
                    </span>
                  </a>
                } @else {
                  {{ item.id_code }}
                }
              </td>
            }
            <td class="proof text-right" [class]="widget ? 'widget' : ''">
              <a [href]="item.sanitized_simpleproof_url" target="_blank" class="badge badge-primary badge-verify" style="font-size: 1.035em;">
                <span class="icon">
                  <img class="icon-img" src="/resources/sp.svg">
                </span>
                <span i18n="simpleproof.verify">Verify</span>
              </a>
            </td>
          </tr>
        </tbody>
        <ng-template #skeleton>
          <tbody>
            <tr *ngFor="let item of [].constructor(itemsPerPage)">
              <td class="filename text-left" [ngClass]="{'widget': widget}">
                <span class="skeleton-loader" style="max-width: 75px"></span>
              </td>
              <td class="id text-left" [ngClass]="{'widget': widget}">
                <span class="skeleton-loader" style="max-width: 75px"></span>
              </td>
              <td class="proof text-right" [ngClass]="{'widget': widget}">
                <span class="skeleton-loader" style="max-width: 75px"></span>
              </td>
            </tr>
          </tbody>
        </ng-template>
      </table>

      <ngb-pagination *ngIf="!widget" class="pagination-container float-right mt-2" [class]="isLoading ? 'disabled' : ''"
        [collectionSize]="verified.length" [rotate]="true" [maxSize]="paginationMaxSize" [pageSize]="itemsPerPage" [(page)]="page"
        (pageChange)="pageChange(page)" [boundaryLinks]="true" [ellipses]="false">
      </ngb-pagination>

      <ng-template [ngIf]="!widget">
        <div class="clearfix"></div>
        <br>
      </ng-template>
    </div>
  }
</div>
